import React from 'react';

/**
 * 组件挂载阶段，要执行的钩子函数
 *
 * 触发页面更新的三个条件
 * 1. 组件状态发生改变：setState({})
 * 2. forceUpdate
 * 3. 组件的 props 当中的属性值发生改变。
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    // 为事件处理程序绑定this
    console.log('1. constructor()');
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    console.log('2. render');
    return (
      <div>
        <button onClick={this.handleClick}>点击次数{this.state.count}</button>
        {this.state.count > 3 ? <></> : <Counter count={this.state.count} />}
      </div>
    );
  }

  componentDidMount() {
    // 发送网络请求
    // DOM操作
    console.log('3. componentDidMount()');
  }

  componentDidUpdate() {
    // 有条件调用 this.setState
    // if (this.state.count < 4) {
    //   this.setState({
    //     count: this.state.count + 1,
    //   });
    // }
    console.log('4. componentDidUpdate()');
  }
}

// 子组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log('子组件=> 1. constructor()');
  }

  render() {
    console.log('子组件=> 2. render');
    return (
      <div>
        <h3>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  handleResize = () => {
    console.log('窗口大小改变了');
  };

  componentDidMount() {
    console.log('子组件=> 3. componentDidMount()');

    window.addEventListener('resize', this.handleResize);
    window.addEventListener('resize', () => console.log('匿名resize'));

    this.timerId = setInterval(() => {
      console.log(this.timerId);
    }, 1000);
  }

  componentDidUpdate() {
    console.log('子组件=> 4. componentDidUpdate()');
  }

  componentWillUnmount() {
    // 清理定时器，全局注册的事件处理函数
    window.removeEventListener('resize', this.handleResize);
    clearInterval(this.timerId);
    console.log('子组件=> 5. componentWillUnmount()');
  }
}

export default App;
